<template>
  <view class="rank-box">
    <view class="rank-text">
      目前您的个人荣誉分数为
      <text class="text">{{  totalScore }}</text>
      
      <!-- <view class="rank-score">目前您的分数为
        <text class="text">{{ totalScore }}</text>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import {onMounted, ref, getCurrentInstance, defineProps, watch, computed} from 'vue';

const {proxy} = getCurrentInstance()
const props = defineProps({
  totalScore: {
    type: Number,
    default: 0
  },
})








</script>
<style lang="less" scoped>
.rank-box {
  margin-top: 100rpx;
  .rank-text {
    color: @color-black;
    font-family: 'ali-m';
    margin-bottom: 30rpx;
    font-size: @font-size-31;
    margin-left: 20rpx;

    .text {
      font-size: @font-size-39;
      color: @color-orange;
    }

    .rank-score {
      margin-top: 10rpx;
      font-size: 20rpx;
      color: @color-label;
      font-family: 'ali';

      .text {
        font-size: 25rpx;
        font-family: 'ali-m';
      }
    }
  }

  .rank-warp {
    position: absolute;
    z-index: 1;
  }
}

.rank-bg {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10%;
  position: relative;
  padding: 0 10rpx 0 20rpx;

  .rank-item {
    position: relative;
    border-left: 1px dashed #d0d0d0;

    &:last-child {
      border-right: 1px dashed #d0d0d0;
    }

    .name {
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 25rpx;
      color: @color-label;
      font-family: 'ali-m';
    }

  }

  .rank-end {
    border-left: none;
  }

  .score {
    position: absolute;
    bottom: -60rpx;
    left: 0;
    transform: translateX(-50%);
    font-size: @font-size-23;
    color: @color-label;
    font-family: 'din';

  }
}
</style>
